<template>
  <div class="properties-panel" v-if="selectedElement">
    <h3>属性配置</h3>
    <label>
      名称:
      <input type="text" v-model="selectedElement.name" @input="updateProperty('name', $event.target.value)" />
    </label>
    <label>
      速度:
      <input type="number" v-model="selectedElement.speed" @input="updateProperty('speed', $event.target.value)" />
    </label>
    <label>
      经度:
      <input type="number" v-model="selectedElement.lng" @input="updateProperty('lng', $event.target.value)" />
    </label>
    <label>
      纬度:
      <input type="number" v-model="selectedElement.lat" @input="updateProperty('lat', $event.target.value)" />
    </label>
    <button @click="applyChanges">应用更改</button>
    <button @click="deleteElement">删除元素</button>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'PropertiesPanel',
  computed: {
    ...mapState(['selectedElement'])
  },
  methods: {
    updateProperty(property, value) {
      this.$store.commit('updateElement', { id: this.selectedElement.id, properties: { [property]: value } });
    },
    applyChanges() {
      this.$emit('apply-changes');
    },
    deleteElement() {
      this.$store.commit('removeElement', this.selectedElement.id);
      this.$emit('delete-element', this.selectedElement.id);
    }
  }
};
</script>

<style scoped>
.properties-panel {
  width: 200px;
  padding: 10px;
  border-left: 1px solid #ccc;
  background-color: #f5f5f5;
}

.properties-panel label {
  display: block;
  margin-bottom: 10px;
}

.properties-panel input {
  width: 100%;
  padding: 5px;
  box-sizing: border-box;
  margin-bottom: 10px;
}

button {
  display: block;
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: none;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  border-radius: 4px;
}

button:last-child {
  background-color: #dc3545;
}
</style>
